<template>
  <!-- ! 弹层区域 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    @close="resetForm"
  >
    <!-- !弹层中的表单 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="分类名称" prop="catename">
        <el-input v-model="form.catename" />
      </el-form-item>
      <el-form-item label="图标class" prop="icon">
        <el-input v-model="form.icon" style="width:200px" /> 具体参见xxx字体图标库
      </el-form-item>
      <el-form-item label="排序大小" prop="sort_num">
        <el-input-number v-model="form.sort_num" :min="1" :max="100000" @change="handleChange" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addArticleCate, getArticleCateDetail, editArticleCate } from '@/api/article/cate'
export default {
  data() {
    return {
      form: {
        catename: '',
        sort_num: 10,
        icon: ''
      },
      rules: {
        catename: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请输入图标', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      num: 1
    }
  },
  computed: {
    title() {
      return this.form.id ? '编辑分类' : '添加分类'
    }
  },
  methods: {
    // ! 清空弹层内容
    resetForm() {
      this.form = {
        catename: '',
        sort_num: 10,
        icon: ''
      }
      // ! 重置表单校验
      this.$refs.form.clearValidate()
    },
    // ! 编辑回显
    async updateCate(id) {
      const data = await getArticleCateDetail(id)
      this.form = data
      this.dialogVisible = true
    },
    // ! 添加&编辑
    submit() {
      this.$refs.form.validate(isOk => {
        if (!isOk) return
        this.form.id ? this.doEdit() : this.doAdd()
      })
    },
    // ! 编辑
    async doEdit() {
      await editArticleCate(this.form)
      this.dialogVisible = false
      //   ! 子传父
      //   this.initDate()
      this.$emit('updateList')
      this.$message.success('编辑成功!')
    },
    // ! 添加
    async doAdd() {
      await addArticleCate(this.form)
      this.dialogVisible = false
      //   this.initDate()
      //   ! 子传父
      this.$emit('updateList')
      this.$message.success('添加成功!')
    },
    // ! 弹层关闭
    handleClose() {
      this.dialogVisible = false
    },
    // ! 弹层打开
    openDilog() {
      this.dialogVisible = true
    },
    // ! 计数器
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<style>

</style>
